<template>
  <div class="m-3">
    <VxeBasicTable ref="tableRef" v-bind="gridOptions">
      <template #action="{ row }">
        <TableAction
          :outside="true"
          :actions="[
            {
              label: '查看',
              onClick: handleView.bind(null, row),
            },
            {
              label: '暂停',
              onClick: handleSuspend.bind(null, row),
              ifShow: row.state === 'ACTIVE',
            },
            {
              label: '开始',
              onClick: handleStart.bind(null, row),
              ifShow: row.state === 'SUSPENDED',
            },
            {
              label: '加急',
              onClick: handleUrgent.bind(null, row),
              ifShow: row.state === 'ACTIVE',
            },
          ]"
        />
      </template>
    </VxeBasicTable>
    <BPMNTaskModal
      :width="1200"
      type="view"
      :hasCancel="hasCancel"
      @register="registerModal"
      @success="handleSuccess"
    />
  </div>
</template>
<script lang="ts" setup>
  import type { VxeTableQueryParams } from '@mxpio/utils/src/criteria';
  import type { VxeGridPropTypes } from '@mxpio/components/src/VxeTable';

  import { reactive, ref } from 'vue';
  import { myApplyList, suspend, start, urgent } from '@mxpio/api/src/flow/task';
  import { columns, searchFormSchema } from './myApply.data';
  import { getVxeTableQueryParams } from '@mxpio/utils/src/criteria';

  import { TableAction } from '@mxpio/components/src/Table';
  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@mxpio/components/src/VxeTable';
  import { useModal } from '@mxpio/components/src/Modal';
  import BPMNTaskModal from '../task/BPMNTaskModal.vue';
  import { message } from 'ant-design-vue';
  import { useProfile } from '@mxpio/hooks';

  defineOptions({ name: 'MyApply' });

  const [registerModal, { openModal }] = useModal();
  const hasCancel = ref(false);

  const { restoreStore, updateStore } = useProfile();
  const tableRef = ref<VxeGridInstance>();
  const gridOptions = reactive<BasicTableProps>({
    id: 'MyApply',
    columns: columns,
    formConfig: {
      enabled: true,
      items: searchFormSchema,
    },
    minHeight: 700,
    proxyConfig: {
      ajax: {
        query: async ({ page, form, sorts }: VxeGridPropTypes.ProxyAjaxQueryParams<any>) => {
          return loadData({ page, form, sorts });
        },
      },
    },
    customConfig: {
      storage: {
        visible: true,
        resizable: true,
        sort: true,
        fixed: true,
      }, // 启用自定义列状态保存功能
      restoreStore: restoreStore,
      updateStore: updateStore,
    },
  });

  function loadData(queryParams: VxeTableQueryParams) {
    const params = getVxeTableQueryParams(queryParams);
    return myApplyList(params);
  }

  function handleView(record: Recordable) {
    hasCancel.value = record.state === 'ACTIVE';
    openModal(true, {
      isUpdate: false,
      record: {
        ...record,
        processInstanceId: record.id,
      },
    });
  }

  function handleSuccess() {
    tableRef.value?.commitProxy('query');
  }

  function handleSuspend(row: Recordable) {
    suspend(`${row.id}`).then((res) => {
      if (res.success) {
        message.success('操作成功');
        handleSuccess();
      }
    });
  }

  function handleStart(row: Recordable) {
    start(`${row.id}`).then((res) => {
      if (res.success) {
        message.success('操作成功');
        handleSuccess();
      }
    });
  }

  function handleUrgent(row: Recordable) {
    urgent(`${row.id}`, { $bpmnSortFlag: '1' }).then((res) => {
      if (res.success) {
        message.success('操作成功');
        handleSuccess();
      }
    });
  }
</script>
